<template>
  <el-row type="flex" class="row-bg xl:h-58vh lt-xl:h-37vh overflow-y-auto" >
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>统计分析</p>
        <table>
          <tr>
            <th>案件总数</th>
            <th>已结案总数</th>
            <th>未结案总数</th>
            <th>被告总数</th>
            <th>被告已结案总数</th>
            <th>被告未结案总数</th>
          </tr>
          <tr>
            <td>{{ props.fyfxdata.ajzs || 0 }} 条</td>
            <td>{{ props.fyfxdata.yjazs || 0 }} 条</td>
            <td>{{ props.fyfxdata.wjazs || 0 }} 条</td>
            <td>{{ props.fyfxdata.bgzs || 0 }} 条</td>
            <td>{{ props.fyfxdata.bgyjas || 0 }} 条</td>
            <td>{{ props.fyfxdata.bgwjas || 0 }} 条</td>
          </tr>
          <tr>
            <th>涉案总金额</th>
            <th>已结案金额</th>
            <th>未结案金额</th>
            <th>被告金额</th>
            <th>被告已结案金额</th>
            <th>被告未结案金额</th>
          </tr>
          <tr>
            <td>{{ props.fyfxdata.sazje || 0 }} 元</td>
            <td>{{ props.fyfxdata.yjaje || 0 }} 元</td>
            <td>{{ props.fyfxdata.wjaje || 0 }} 元</td>
            <td>{{ props.fyfxdata.bgje || 0 }} 元</td>
            <td>{{ props.fyfxdata.bgyjaje || 0 }} 元</td>
            <td>{{ props.fyfxdata.bgwjaje || 0 }} 元</td>
          </tr>
        </table>
      </div>
    </el-col>
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>案件分析</p>
        <el-table
          style="margin-top: 20px"
          row-key="id"
          :data="props.fyfxdata.ajfx"
          :stripe="true"
          border
          :show-overflow-tooltip="true"
        >
          <el-table-column label="类型" align="left" prop="dataType" width="100">
            <template #default>
              执行公告
            </template>
          </el-table-column>
          <el-table-column label="标题" align="left" prop="title" width="150"/>
          <el-table-column label="立案时间" align="left" prop="sortTimeString" width="170" />
          <el-table-column label="案件进展阶段" align="left" prop="caseState" width="150" />
          <el-table-column label="判决结果" align="left" prop="body" />
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

// 定义 props
import {dateFormatter} from "@/utils/formatTime";

const props = defineProps<{
  fyfxdata: object
  dataId: number
}>()

/** 数据查询-探针C 列表 */
defineOptions({ name: 'DataQueryFyxq' })
</script>
<style scoped>
.row-bg * {
  font-size: 14px;
}
.title {
  font-weight: bolder;
}
.title-box{
  padding: 0 3px;
  background: #2d8cf0;
  margin-right: 8px;
}
.tab-header{
  text-align: center;
  padding: 5px;
  background: #f0f2f5;
  border: 1px solid #bfcbd9;
  margin-top: 10px
}

.box-content *{
  font-size: 18px;
  font-weight: bold;
}



.box-back{
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: white;
  padding: 10px;
  text-align: center;
  font-size: 19px;
}
.box-back p{
  margin-top: 5px;
}



table {
  margin-top: 20px;
  border-collapse: collapse;  /* 边框合并 */
  width: 100%;  /* 表格宽度 */
}
th, td {
  border: 1px solid #ddd;  /* 单元格边框 */
  padding: 8px;  /* 单元格内边距 */
  text-align: center;  /* 单元格内容居中 */
}
.tr-green *{
  color: green;
}
.tr-red *{
  color: red;
}
th {
  background-color: #f9f9f9;  /* 表头背景色 */
}
tr{
  background-color: white;  /* 偶数行背景色 */
}
</style>
